"use client"; // 添加这一行，使组件变为 Client Component
import { NodeMapContext } from "@/providers/NodeMapContext";
import { RootState, useAppDispatch } from "@/store/client";
import { deleteBox } from "@/store/client/modules/reactdndStore";
import { useNodeMap } from "@/store/client/modules/reactdndStore/useNode";
import { acceptTypes, findAllChildrenWithIndex, HoverPositionType } from "@/utils/reactDnd/reactDnd";
import { useHoverPositionView } from "@/utils/reactDnd/useHoverPosition";
import { DeleteOutlined, DragOutlined } from "@ant-design/icons";
import { useContext, useEffect, useRef, useState } from "react";
import { useDragDropManager, useDrop } from "react-dnd";
import { useSelector } from "react-redux";

interface MyComponentProps {
    refDrage: any
    data?: any
}

const StyleView: React.FC<MyComponentProps> = ({ refDrage, data }) => {
    const { isTop, isBottom, isNow } = useHoverPositionView()
    const dispatch = useAppDispatch()
    useEffect(() => {

    }, [])
    const handleDelete = () => {
        dispatch(deleteBox({ Id: data.id }))
    }

    return <span>

        {isNow(data) && <div ref={refDrage} className=" absolute h-5 w-auto bg-blue-300 z-10 top-0 left-0  ">
            <DragOutlined />
        </div>}
        {isNow(data) && <div onClick={handleDelete} className=" absolute h-5 w-auto bg-blue-300 z-10  bottom-0 right-0">
            <DeleteOutlined />
        </div>}

        {isTop(data) && <div className={`h-2  bg-amber-700  w-full absolute top-0 z-20`} />}
        {isBottom(data) && <div className={`h-2 w-full bg-amber-700 absolute bottom-0 z-20 `} />}
    </span>

}
export default StyleView;